/**********
@name: textarea组件
@describtion: props: title:字段别名,value:字段值
@author:liubingye
@date:2023-02-10 10:29:07
***********/
<template>
  <div class="textarea-outer-box expand-form-item">
    <el-form-item :label="props.title" :prop="props.field">
      <el-input v-model="inputVal" type="textarea" :autosize="{ minRows: props.setting.min_rows, maxRows: props.setting.max_rows }"/>
    </el-form-item>
    <div v-if="props.children && props.children.length > 0" class="option-box">
      <div class="option-btn" @click="changeChildrenShow">
        <div class="option-btn-icon">
          <span :class="{ plus: childrenShow }"></span>
        </div>
        <p>{{ childrenShow ? "取消" : "拓展" }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue"

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  field: {
    type: String,
    default: ''
  },
  children: {
    type: Array,
    default: () => [],
  },
  childrenShow: {
    type: Boolean,
    default: false,
  },
  setting: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['update:value', "update:childrenShow"])
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits("update:childrenShow", !childrenShow.value)
}
const inputVal = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value',val)
  }
})
</script>

<style scoped lang="scss">
.textarea-outer-box{
  min-height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  ::v-deep(.el-form-item){
    margin-bottom: 0;
    width: 100%;
  }
  ::v-deep(.el-textarea__inner){
    width: 100%;
  }
}
</style>